﻿/*
Copyright (c) Microsoft Corporation

All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0   

THIS CODE IS PROVIDED *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT.  

See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. 
*/

(function () {
    "use strict";

    WinJS.UI.Pages.define("/yeti.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            var picker = Windows.ApplicationModel.Contacts.ContactPicker();

            var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
            openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
            openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
            openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
            openPicker.commitButtonText = "Select";

            var thumbURL = null;
            picker.commitButtonText = "Select";
            var state = WinJS.Navigation.state;
            var colorFlyout = document.getElementById('colorFlyout');
            var nameFlyout = document.getElementById('nameFlyout');
            var imageMenu = document.getElementById('imageMenu');

            var nameTextInput = document.getElementById('name');
            var shareButton = document.getElementById('share');
            var selectFromContactsOption = document.getElementById('fromcontacts');
            var selectFromFileOption = document.getElementById('fromfile');
            var picConfButton = document.getElementById('pic_conf');
            var nameSaveButton = document.getElementById('name_save_button');
            var templ = document.getElementById('hiker_conf_wrap');

            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
            WinJS.Binding.processAll(templ, state.data);

            // show color flyout


            // show name flyout
            document.getElementById('name_conf').addEventListener('click', function (ev) {
                document.getElementById('name').value = WinJS.Navigation.state.data.title;
                nameFlyout.winControl.show(this, 'top', 'right');
            }, false);


            picConfButton.addEventListener('click', function (ev) {
                imageMenu.winControl.show(this, 'top', 'left');
            });

            // select from contacts selected
            selectFromContactsOption.addEventListener('click', function (ev) {
                var thumb = picker.pickSingleContactAsync().then(function (contact) {
                    if (!contact) {
                        return false;
                    };

                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var img = new Image();

                    img.onload = function () {
                        var state = WinJS.Navigation.state;
                        var data = state.data;

                        data.profile_pic = returnDataUrlFromImg(this);
                        nameFlyout.winControl.hide();
                        WinJS.Navigation.navigate('/yeti.html', DataYeti);
                    };

                    return contact.getThumbnailAsync().done(function (thumbnail) {
                        thumbURL = URL.createObjectURL(thumbnail, { oneTimeOnly: true });
                        img.src = thumbURL;
                    });

                });

            });

            selectFromFileOption.addEventListener('click', function (ev) {
                var face_img = new Image();
                face_img.onload = (function () {// save new image data to hiker
                    var state = WinJS.Navigation.state;
                    var data = state.data;
                    var index = parseInt(state.key);

                    var dataurl = returnDataUrlFromImg(this);
                    data.profile_pic = dataurl;
                    imageMenu.winControl.hide();

                    // reload screen with new data
                    WinJS.Navigation.navigate('/yeti.html', DataYeti );
                });

                openPicker.pickSingleFileAsync().then(function (file) {
                    if (file) {
                        var url = URL.createObjectURL(file, { oneTimeOnly: true });
                        face_img.src = url;
                    };
                });

            });

            // name save selected
            nameSaveButton.addEventListener('click', function (ev) {
                var new_name = nameTextInput.value;
                var state = WinJS.Navigation.state;
                var data = state.data;

                data.title = new_name;
                nameFlyout.winControl.hide();
                WinJS.Navigation.navigate('/yeti.html', DataYeti);
            });

            shareButton.addEventListener('click', function (e) {
                Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
            });

        },
        unload: function (e) {
            
        }
    });

})();
